<template>
  <view class="markdown-wrapper">
    <rich-text 
      v-if="parsedContent" 
      :nodes="parsedContent"
      class="markdown-content"
    ></rich-text>
  </view>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 解析 Markdown 为 HTML
    const parsedContent = computed(() => {
      if (!props.content) return ''
      
      let html = props.content
      
      // 转义HTML特殊字符
      html = html.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
      
      // 标题 (# ## ###)
      html = html.replace(/^### (.*$)/gim, '<h3 class="md-h3">$1</h3>')
      html = html.replace(/^## (.*$)/gim, '<h2 class="md-h2">$1</h2>')
      html = html.replace(/^# (.*$)/gim, '<h1 class="md-h1">$1</h1>')
      
      // 链接 [text](url)
      html = html.replace(/\[([^\]]+)\]\(([^\)]+)\)/g, '<a class="md-link" href="$2" target="_blank">$1</a>')
      
      // 粗体 **text**
      html = html.replace(/\*\*(.*?)\*\*/g, '<strong class="md-strong">$1</strong>')
      
      // 斜体 *text* 或 _text_
      html = html.replace(/(?<!\*)\*(?!\*)([^\*]+)\*(?!\*)/g, '<em class="md-em">$1</em>')
      html = html.replace(/_([^_]+)_/g, '<em class="md-em">$1</em>')
      
      // 代码块 ```language ... ```
      html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="md-code-block"><code>$2</code></pre>')
      
      // 行内代码 `code`
      html = html.replace(/`([^`]+)`/g, '<code class="md-inline-code">$1</code>')
      
      // 分割线 ---
      html = html.replace(/^---$/gim, '<hr class="md-hr" />')
      
      // 无序列表 - 或 *
      html = html.replace(/^[•\-\*]\s+(.+)$/gim, '<li class="md-li">$1</li>')
      
      // 处理表格
      const lines = html.split('\n')
      let inTable = false
      let tableHtml = ''
      const processedLines = []
      
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim()
        
        // 检测表格行
        if (line.startsWith('|') && line.endsWith('|')) {
          if (!inTable) {
            inTable = true
            tableHtml = '<table class="md-table">'
          }
          
          const cells = line.split('|').filter(cell => cell.trim() !== '')
          const isHeaderSeparator = cells.every(cell => /^[\s-:]+$/.test(cell))
          
          if (isHeaderSeparator) {
            continue
          }
          
          const isHeader = inTable && !tableHtml.includes('<tr')
          
          if (isHeader) {
            tableHtml += '<thead><tr class="md-tr md-tr-header">'
            cells.forEach(cell => {
              tableHtml += `<th class="md-th">${cell.trim()}</th>`
            })
            tableHtml += '</tr></thead><tbody>'
          } else {
            tableHtml += '<tr class="md-tr">'
            cells.forEach((cell, idx) => {
              tableHtml += `<td class="md-td md-td-${idx === 0 ? 'first' : 'other'}">${cell.trim()}</td>`
            })
            tableHtml += '</tr>'
          }
        } else {
          if (inTable) {
            tableHtml += '</tbody></table>'
            processedLines.push(tableHtml)
            inTable = false
            tableHtml = ''
          }
          processedLines.push(line)
        }
      }
      
      if (inTable) {
        tableHtml += '</tbody></table>'
        processedLines.push(tableHtml)
      }
      
      html = processedLines.join('\n')
      
      // 段落换行
      html = html.replace(/\n\n/g, '<br class="md-paragraph-break"/><br class="md-paragraph-break"/>')
      html = html.replace(/\n/g, '<br class="md-line-break"/>')
      
      // 包装在容器中
      return `<div class="md-container">${html}</div>`
    })
    
    return {
      parsedContent
    }
  }
}
</script>

<style scoped>
.markdown-wrapper {
  width: 100%;
  overflow-x: auto;
}

.markdown-content {
  width: 100%;
  font-size: 13px;
  line-height: 1.4;
  color: #2c3e50;
}

/* Markdown 样式 - 使用 >>> 深度选择器让样式生效到 rich-text 内部 */
.markdown-content >>> .md-container {
  line-height: 1.4;
  color: #2c3e50;
}

/* 标题 */
.markdown-content >>> .md-h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 8px 0 4px 0;
  padding-bottom: 4px;
  border-bottom: 2px solid #e1e4e8;
  color: #1a202c;
  line-height: 1.2;
}

.markdown-content >>> .md-h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 6px 0 3px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid #e1e4e8;
  color: #1a202c;
  line-height: 1.2;
}

.markdown-content >>> .md-h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 4px 0 2px 0;
  color: #2c3e50;
  line-height: 1.2;
}

/* 强调 */
.markdown-content >>> .md-strong {
  font-weight: 700;
  color: #0366d6;
}

.markdown-content >>> .md-em {
  font-style: italic;
  color: #6a737d;
}

/* 链接 */
.markdown-content >>> .md-link {
  color: #0366d6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.markdown-content >>> .md-link:hover {
  color: #0256c7;
  border-bottom-color: #0366d6;
}

.markdown-content >>> .md-link:active {
  color: #024ea4;
}

/* 代码 */
.markdown-content >>> .md-inline-code {
  padding: 1px 3px;
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 2px;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
  font-size: 11px;
  color: #e83e8c;
}

.markdown-content >>> .md-code-block {
  padding: 8px;
  margin: 6px 0;
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
  overflow-x: auto;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
  font-size: 11px;
  line-height: 1.3;
  color: #24292e;
}

.markdown-content >>> .md-code-block code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* 分割线 */
.markdown-content >>> .md-hr {
  border: none;
  border-top: 1px solid #e1e4e8;
  margin: 8px 0;
  height: 0;
}

/* 列表 */
.markdown-content >>> .md-li {
  margin: 2px 0 2px 18px;
  padding-left: 4px;
  list-style-type: disc;
  line-height: 1.4;
  color: #2c3e50;
}

/* 表格 */
.markdown-content >>> .md-table {
  width: 100%;
  margin: 6px 0;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.markdown-content >>> .md-tr-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.markdown-content >>> .md-th {
  padding: 6px 10px;
  text-align: center;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  color: #fff;
}

.markdown-content >>> .md-tr {
  background-color: #fff;
  transition: background-color 0.2s;
}

.markdown-content >>> .md-tr:nth-child(even) {
  background-color: #f9fafb;
}

.markdown-content >>> .md-tr:hover {
  background-color: #f0f4ff;
}

.markdown-content >>> .md-td {
  padding: 4px 10px;
  border: 1px solid #e1e4e8;
  line-height: 1.3;
}

.markdown-content >>> .md-td-first {
  text-align: left;
  font-weight: 500;
  color: #2c3e50;
}

.markdown-content >>> .md-td-other {
  text-align: center;
  color: #4a5568;
}

/* 段落间距 */
.markdown-content >>> .md-paragraph-break {
  display: block;
  height: 4px;
}

.markdown-content >>> .md-line-break {
  display: block;
  height: 1px;
}

/* 滚动条优化 */
.markdown-wrapper::-webkit-scrollbar {
  height: 6px;
}

.markdown-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.markdown-wrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.markdown-wrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>

